<template>
  <div>
    <header>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="advice">打印预览</el-button>
      <el-button type="primary" @click="clearCanvas">清除</el-button>
    </header>
    <section class="">
      <el-form ref="form" label-width="80px">
        <el-form-item label="模板类型">
          <el-select v-model="printType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div class="box">
          <div class="box-left">
            <el-form-item label="模板内容">
              <textarea ref="panel" v-model="textarea" name="content" />
            </el-form-item>
          </div>
          <div class="box-right">
            <el-form-item label="模板详情">
              <canvas id="panel" class="canvas" />
            </el-form-item>
          </div>
        </div>
      </el-form>
    </section>
  </div>
</template>

<script>
  import { getPrinterType, savePrinterType } from '@/api'
  import { BeeDraw } from '@/utils/print-util.js'
  export default {
    name: 'print',
    data() {
      return {
        form: {},
        printType: '',
        options: [{
          value: '1',
          label: '配送单'
        }, {
          value: '2',
          label: '瓶批销售单'
        }, {
          value: '3',
          label: '槽批销售单'
        }, {
          value: '15',
          label: '押金单'
        }, {
          value: '11',
          label: '调拨单'
        }, {
          value: '18',
          label: '报修单'
        }, {
          value: '31',
          label: '退户申请单'
        }, {
          value: '32',
          label: '退瓶单'
        }, {
          value: '33',
          label: '退瓶退款单'
        }, {
          value: '34',
          label: '费用办理单'
        }, {
          value: '35',
          label: '气瓶提取单'
        }, {
          value: '36',
          label: '瓶批销售单-新版'
        }, {
          value: '37',
          label: '槽批销售单-新版'
        }, {
          value: '38',
          label: '配送单-新版'
        }, {
          value: '39',
          label: '订单回单'
        }, {
          value: '40',
          label: '充装单'
        }],
        textarea: ''
      }
    },
    watch: {
      printType(val) {
        this.getPrintType(val)
      }
    },
    methods: {
      async getPrintType(val) {
        const res = await getPrinterType({
          templateType: val
        })
        this.textarea = ''
        if (res.data) {
          this.textarea = res.data.templateContent
        } else {
          this.textarea = ''
        }
      },
      // 打印预览
      advice() {
        console.log(this.textarea)
        if (this.textarea) {
          var json = this.textarea
          // eslint-disable-next-line no-eval
          var data = eval('(' + json + ')')
          if (data.doc) {
            var printpanel = data
            var source = {
              title: '百江西南燃气有限公司槽批采购入库单',
              dt: '2021-03-06',
              code: '123455555',
              storeName: '临时仓库',
              orderCode: '88888',
              csmCode: '123456',
              csmName: '测试客户',
              marker4: '1',
              marker5: '1',
              marker8: '说明',
              details: []
            }
            if (!(source instanceof Array) && source instanceof Object) {
              new BeeDraw(true).draw(printpanel, source)
            }
          } else {
            var c = document.getElementById('panel')
            var ctx = c.getContext('2d')// 获取上下文的环境
            c.width = data.width // 模板宽度
            c.height = data.height // 模板高度
            for (var i in data.items) {
              var item = data.items[i]
              ctx.lineWidth = 0.5
              ctx.fillStyle = '#333'
              ctx.font = item.size + 'px  宋体'
              if (item.pt) {
                // 绘制文本
                ctx.fillText(item.pt, item.x, item.y) // 文字
              } else if (item.source) {
                // 绘制图片
                var x = item.x
                var y = item.y - 15
                var width = (item.x1 - item.x)
                var height = (item.y1 - item.y)
                this.preImage(item.source, function(x, y, width, height) {
                  ctx.drawImage(this, x, y, width, height)
                }, { 'x': x, 'y': y, 'width': width, 'height': height })
              } else {
                // 绘制线条
                ctx.beginPath()
                ctx.lineWidth = item.size
                ctx.lineCap = 'butt'
                ctx.closePath()
                ctx.strokeStyle = '#ff0000'
                ctx.moveTo(item.x, item.y - 15)
                ctx.lineTo(item.x1, item.y1 - 15)
                ctx.stroke()
              }
            }
          }
        }
      },
      // 保存
      async save() {
        if (this.printType) {
          const res = await savePrinterType({
            templateType: this.printType,
            templateContent: this.textarea
          })
          if (res.data !== null) {
            this.$message.success('保存成功')
          }
        }
      },
      // 清除画布
      clearCanvas() {
        var c = document.getElementById('panel')
        var cxt = document.getElementById('panel').getContext('2d')
        cxt.clearRect(0, 0, c.width, c.height)
      },
      preImage(url, callback, wo) {
        var img = new Image() // 创建一个Image对象实现图片的预下载
        img.src = url
        if (img.complete) { // 如果图片已经存在于浏览器缓存;直接调用回调函数
          callback.call(img, wo.x, wo.y, wo.width, wo.height)
          return
        }
        img.onload = function() { // 图片下载完毕时异步调用callback函数。
          callback.call(img, wo.x, wo.y, wo.width, wo.height)// 将回调函数的this替换为Image对象
        }
      }

    }
  }
</script>

<style lang='scss' scoped>
    header {
      padding: 10px 15px;
      line-height: 5vh;
    }
    section {
      width: max-content;
      min-height: calc(95vh - 20px);
      padding: 15px;
      background: #9bc1c9;
    }
    .box {
      display: flex;
      &-left {
        textarea {
          width: 550px;
          height: calc(95vh - 120px);
          border-radius: 10px;
        }
      }
      &-right {
        .canvas {
          background: white;
          border: 1px solid #7c7c7c;
        }
      }
    }
</style>
